<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="../../common/tag.jsp"%>
<%@ page isELIgnored="false" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>">
<title>微信原生卡领取统计</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<link href="css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
<link href="css/style.min862f.css?v=4.1.0" rel="stylesheet">
<link href="css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
<link href="css/animate.min.css" rel="stylesheet">
<link href="css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">
<link href="css/plugins/chosen/chosen.css" rel="stylesheet">
<link href="css/plugins/ionRangeSlider/ion.rangeSlider.css" rel="stylesheet">
<link href="css/plugins/ionRangeSlider/ion.rangeSlider.skinFlat.css" rel="stylesheet">
<link href="css/plugins/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css" rel="stylesheet">
<link href="css/plugins/clockpicker/clockpicker.css" rel="stylesheet">  
<link href="css/style.min862f.css?v=4.1.0" rel="stylesheet">  
</head>
<body class="gray-bg">
	<input type="hidden" id="paramStartTimeHidden" />
	<input type="hidden" id="paramEndTimeHidden" />
	<div class="wrapper wrapper-content animated fadeInRight">
	    <div class="row">
	        <div class="col-sm-12">
	            <div class="ibox float-e-margins">
	                <div class="ibox-title">
	                    <h5>微信原生卡领取统计</h5>
	                </div>
	                <div class="ibox-content">
	                    <form role="form" id="wxOriginCardQueryForm" class="form-inline">
	                        <div class="form-group">
	                            <input id="paramStartTime" name="paramStartTime" class="form-control" type="text" readonly placeholder="领取开始时间">
	                        </div>
	                        
	                        <div class="form-group">
	                            <input id="paramEndTime" name="paramEndTime" class="form-control" type="text" readonly placeholder="领取结束时间">
	                        </div>
	                        
	                       <div class="form-group">
	                            <input id="membershipNumber" name="membershipNumber" class="form-control" type="text" placeholder="手机号">
	                        </div>
	                        
	                        <div class="input-group">
	                            <button class="btn btn-primary" type="button" style="margin-bottom: 0px;"
	                                    onclick="search();"><i class="fa fa-search"></i>&nbsp;查询
	                            </button>
	                        </div>
	                        <div class="input-group">
	                            <button class="btn btn-primary" type="button" style="margin-bottom: 0px;"
	                                    onclick="exportExcel();"><i class="fa fa-search"></i>&nbsp;导出
	                            </button>
	                        </div>
	                    </form>
	                </div>
	            </div>
	        </div>
	    </div>
	    <div class="row">
			<div class="col-lg-12">
				<div class="ibox float-e-margins">
					<div class="ibox-title">
						<h5>微信原生卡领取报表</h5>
					</div>
					<div class="jumbotron" style="background-color:white;display:inline-block;width:100%;">
						<div id="wxFansCardReport" style="float:left;height:360px;width:100%;"></div>
					</div>
				</div>
			</div>
		</div>
	    <!-- Panel Other -->
	    <div class="ibox float-e-margins" id="tableShow">
	    	<div class="ibox-title">
               <h5>微信原生卡领取数据</h5>
           </div>
	        <div class="ibox-content">
	            <div class="row row-lg">
	                <div class="col-sm-12">
	                    <!-- Example Events -->
	                    <div class="example-wrap">
	                        <table id="wxOriginCardListTable" data-mobile-responsive="true"
	                               data-click-to-select="true" data-unique-id="id">
	                            <thead>
	                            </thead>
	                        </table>
	                    </div>
	                </div>
	                <!-- End Example Events -->
	            </div>
	        </div>
	    </div>
	</div>
</body>
</html>
<script src="js/jquery.min.js?v=2.1.4"></script>
<script src="js/bootstrap.min.js?v=3.3.6"></script>
<script src="js/content.min.js?v=1.0.0"></script>
<script src="js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
<script src="js/plugins/bootstrap-table/bootstrap-table-mobile.min.js"></script>
<script src="js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
<!--时间选择-->
<script src="js/plugins/layer/laydate/laydate.js"></script>
<!--下拉框-->
<script src="js/plugins/chosen/chosen.jquery.js"></script>
<script src="${ctx}/js/echarts.js"></script>

<script type="text/javascript">
var paramStartTime = null;
var paramEndTime = null;
//日期选择框
var start = {
	elem : "#paramStartTime",
	format : "YYYY-MM-DD hh:mm:ss",
	max : "2099-06-16",
	istime : true,
	istoday : false,
	choose:function(date) {
		paramStartTime = date;
	}
};
var end = {
	elem : "#paramEndTime",
	format : "YYYY-MM-DD hh:mm:ss",
	max : "2099-06-16",
	istime : true,
	istoday : false,
	choose:function(date) {
		paramEndTime = date;
	}
};
laydate(start);
laydate(end);

var refDate = [];
var userCount = [];

//基于准备好的dom，初始化echarts实例
var wxFansCardReportChart = echarts.init(document.getElementById('wxFansCardReport'));

// 指定图表的配置项和数据
var wxFansCardReportOption = {
    title: {      //标题组件
        text: '微信原生卡领取报表',
        textStyle: {  
            fontWeight: 'normal',              //标题颜色  
            color: '#20B2AA'  
        },  
    },
    tooltip: {    //提示框组件
        trigger: 'axis'
    },
    grid: {       //直角坐标系内绘图网格
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    toolbox: {     //工具栏
    	show:true,
    	x:'95%',
        feature: {
            saveAsImage: {}
        }
    },
    xAxis: {       //直角坐标系 grid 中的 x 轴
        type: 'category',
        boundaryGap: false,
        data: [],
        axisLabel: {
            show: true,
            textStyle: {
                color: '#20B2AA'
            }
        }
    },
    yAxis: {       //直角坐标系 grid 中的 y 轴
        type: 'value',
        	axisLabel: {
                show: true,
                textStyle: {
                    color: '#20B2AA'
                }
            }
    },
    series: [      //系列列表
        {
            name: '总粉丝量',
            type: 'line',
            stack: '总量',
            symbol:'circle',
            symbolSize: 8,
            areaStyle: {normal: {color:'rgba(78, 238, 148, 0.2)'}},
            itemStyle : {normal : {color:'#20B2AA',lineStyle:{width:1,color:'#20B2AA'}}},
            data: []
        }
    ]
};

// 使用刚指定的配置项和数据显示图表。
wxFansCardReportChart.setOption(wxFansCardReportOption);

var $table = $('#wxOriginCardListTable');

var search = function () {
	
	$("#paramStartTimeHidden").val($("#paramStartTime").val());
	$("#paramEndTimeHidden").val($("#paramEndTime").val());
	
	refDate.splice(0, refDate.length);
	userCount.splice(0, userCount.length);
	$.ajax({
		url:"${ctx}/wxOriginCardAnalyze/selectWxFansCardList",
		data:{"paramStartTime":paramStartTime,"paramEndTime":paramEndTime},
		success:function(resp) {
			if(resp.errorCode == 0) {
				for(var i = 0;i < resp.data.length;i++) {
					refDate.push(resp.data[i].refDate);
					userCount.push(resp.data[i].userCount);
				}
				wxFansCardReportChart.setOption({        //加载数据图表
	                xAxis: {
	                    data: refDate
	                },
	                series: [{
	                    // 根据名字对应到相应的系列
	                    name: '原生卡领取人数',
	                    data: userCount
	                }]
	            });
			}
		}
	})
	
    $table.bootstrapTable('refresh');
}

var config = {
    ".chosen-select": {},
    ".chosen-select-deselect": {allow_single_deselect: !0},
    ".chosen-select-no-single": {disable_search_threshold: 10},
    ".chosen-select-no-results": {no_results_text: "Oops, nothing found!"},
    ".chosen-select-width": {width: "95%"}
};

$(document).ready(function () {
    //将表单元素和table属性转成json
    queryParams = function (params) {
        var temp = {};
        temp.currentResult = params.offset;
        temp.showCount = params.limit;
        var formParam = $('#wxOriginCardQueryForm').serializeArray();
        for (var i = 0; i < formParam.length; i++) {
            if (formParam[i].value != '') {
                temp[formParam[i].name] = formParam[i].value;
            }
        }
        return temp;
    };

    rowStyle = function (row, index) {
        var classes = ['info', 'success', 'info', 'warning', 'danger'];
        if (index % 2 === 0 && index / 2 < classes.length) {
            return {
                classes: classes[index / 2]
            };
        }
        return {};
    }

    $table.bootstrapTable({
    	type: "get",
        url: "wxOriginCardAnalyze/selectWxFansCardDetailList",
        pagination: !0,
        showRefresh: !0,
        showToggle: !0,
        showColumns: !0,
        iconSize: "outline",
        striped: true, //是否显示行间隔色
        queryParams: queryParams,//传递参数（*）
        sidePagination: "server", //服务端处理分页
        pageSize: 10,                       //每页的记录行数（*）
        pageList: [5, 10, 20, 50],        //可供选择的每页的行数（*）
        minimunCountColumns: 2,      //可供选择的每页的行数（*）
        //detailView: true,
        sortName: undefined,
        sortOrder: 'asc',
        sortStable: false,
        contentType: "application/json; charset=utf-8",
        rowStyle: rowStyle,
        iconsPrefix: 'glyphicon', // glyphicon of fa (font awesome)
        icons: {
            refresh: "glyphicon-repeat",
            toggle: "glyphicon-list-alt",
            columns: "glyphicon-list",
            detailOpen: 'glyphicon-plus icon-plus',
            detailClose: 'glyphicon-minus icon-minus',
            sortable: 'glyphicon-minus icon-minus'
        },
        onLoadSuccess: function (data) {
            if (data.total < 5) {
                $table.bootstrapTable('getOptions')["height"] = 400;
            } else {
                $table.bootstrapTable('getOptions')["height"] = '';
            }

            $table.bootstrapTable('hideColumn', 'id');
            $table.bootstrapTable('hideColumn', 'edit');
        },
        columns: [
             {
                title: '昵称',
                field: 'nickName',
                align: 'center',
                valign: 'middle'
            },{
                title: '手机',
                field: 'mobile',
                align: 'center',
                valign: 'middle'
            },{
                title: '领取时间',
                field: 'acquireTime',
                align: 'center',
                valign: 'middle',
                formatter: function (value, row, index) {
                    return CovertToDate(value);
                }
            },{
                title: '是否激活',
                field: 'acquireStatus',
                align: 'center',
                valign: 'middle',
                formatter: function (value, row, index) {
                	if(row.acquireStatus == 0) {
                		return "未激活";
                	} else if(row.acquireStatus == 1) {
                		return "已激活";
                	}
                }
            }
        ]
    });
    for (var selector in config)$(selector).chosen(config[selector]);
});

function tableHeight() {
    return $(window).height() - 50;
}
</script>

<script type="text/javascript">
	
$.ajax({
	url:"${ctx}/wxOriginCardAnalyze/selectWxFansCardList",
	data:{"paramStartTime":paramStartTime,"paramEndTime":paramEndTime},
	success:function(resp) {
		if(resp.errorCode == 0) {
			for(var i = 0;i < resp.data.length;i++) {
				refDate.push(resp.data[i].refDate);
				userCount.push(resp.data[i].userCount);
			}
			wxFansCardReportChart.setOption({        //加载数据图表
                xAxis: {
                    data: refDate
                },
                series: [{
                    // 根据名字对应到相应的系列
                    name: '原生卡领取人数',
                    data: userCount
                }]
            });
		}
	}
})


    function CovertToDate(unittime) {
        //3.转换成js时间格式
        var jsDate = new Date(unittime).Format("yyyy-MM-dd hh:mm:ss");
     	
        return jsDate;


    }
    Date.prototype.Format = function (fmt) { //author: meizz 
        var o = {
            "M+": this.getMonth() + 1, //月份 
            "d+": this.getDate(), //日 
            "h+": this.getHours(), //小时 
            "m+": this.getMinutes(), //分 
            "s+": this.getSeconds(), //秒 
            "q+": Math.floor((this.getMonth() + 3) / 3), //季度 
            "S": this.getMilliseconds() //毫秒 
        };
        if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
        for (var k in o)
        if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
        return fmt;
    }

var exportExcel = function() {
	var paramStartTimeHidden = $("#paramStartTimeHidden").val();
	var paramEndTimeHidden = $("#paramEndTimeHidden").val();
	window.location.href = "wxOriginCardAnalyze/exportExcel?paramStartTime="+paramStartTimeHidden+"&paramEndTime="+paramEndTimeHidden;
}
    
</script>